<template>
	<view>
		<u-navbar title="我的地址" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view>
			<view class="addressList" v-if="addressList.length>0">
				<!-- <view v-for="item, index in addressList" :key="index" class="item">
					<view class="leftBox">
						<i class="iconc" v-if="index == 0">默认地址</i>
						<span>{{ item.address }}</span>
						<view style="font-size: 0.8rem;">{{ item.detailadd }}</view>
						<view>
							<span>{{ item.name }}</span>
							<span> {{ item.phone }}</span>
						</view>

					</view>
					<view class="rightBox">
						<u-icon @click="updAddress(item)" name="edit-pen"></u-icon>
					</view>
				</view> -->
			</view>
			<u-empty v-else mode="list" text="请先新增收货地址哦" marginTop="50%"></u-empty>
			<u-divider lineColor="#ccc" :dot="true"></u-divider>
			<view class="button">
				<u-button iconColor="#fff" color="#ff5a5f" @click="addAddress" text='添加新地址' icon="plus"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
	onShow() {
		this.$store.dispatch('getAddress')
	},
	data() {
		return {
		}
	},
	computed: {
		...mapGetters(['addressList'])
	},
	methods: {
		addAddress() {
			this.$store.commit('SET_CUR_ADDRESS', {})
			this.$Router.push({
				name: 'updAddress'
			})
		},
		updAddress(item) {
			this.$store.commit('SET_CUR_ADDRESS', item)
			this.$Router.push({
				name: 'updAddress'
			})
		}

	}
}
</script>

<style lang="scss" scoped>
page {
	height: 100%;
}

.addressList {
	margin: 1.5rem 1rem 0rem 1rem;

	.item {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
		padding-bottom: 0.5rem;
		margin-bottom: 1rem;

		.leftBox {
			display: flex; //flex开关，要用就得写
			flex-direction: column;

			span {
				display: inline-block; //行内样式开关
				margin: 0.2rem 0;
			}

			i {
				width: 4rem;
				text-align: center;
				background-color: $uni-color-theme-6;
				border-radius: 0.3rem;
				font-style: normal;
				font-size: 0.6rem;
				padding: 0.2rem 0.4rem;
				color: white;
				margin-bottom: 0.3rem;
			}
		}

		.rightBox {
			display: flex;
			justify-content: flex-end;
			align-items: center;

		}
	}


}

.button {
	position: fixed;
	bottom: 1rem;
	left: calc(50% - 45%);

	width: 90%;
	border-radius: 2rem;


}
</style>
